<template>
  <nut-tabbar
    v-model="activeName"
    @tab-switch="tabSwitch"
    v-if="tabList.length"
  >
    <nut-tabbar-item
      v-for="item in props.tabList"
      :key="item.name"
      :name="item.name"
      :tab-title="item.title"
      :icon="item.icon"
    >
      <template #icon="props">
        <img :src="props.active ? item.activeIcon : item.icon" alt="" />
      </template>
    </nut-tabbar-item>
  </nut-tabbar>
</template>

<script setup>
import { ref } from "vue";

const props = defineProps({
  tabList: {
    type: Array,
    default: () => [],
  },
});

const activeName = ref("category");

const tabSwitch = (item, index) => {
  console.log(item, index);
};
</script>
